Vue.component("userlist", {
  data() {
    return {
      total: 0,
      cpage: 1,
      tabledata: [],
      datebe: [],
      sval: "",
      selrows: []
    }
  },
  props: ["path", "col", "showitem", "pval", "vt"],
  template: `<div style="margin:20px;">
      <el-date-picker v-model="datebe" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd""></el-date-picker>
      <el-input v-model="sval" placeholder="UserID/昵称"></el-input>
      <el-button type="primary" plain @click="opendata(1)">查询</el-button><br/><br/>
      <el-button-group>
        <el-button type="primary" size="mini">设置靓号</el-button>
        <el-button type="primary" size="mini" @click="setbus(1)">商务1</el-button>
        <el-button type="primary" size="mini" @click="setbus(2)">商务2</el-button>
        <el-button type="primary" size="mini" @click="setrank(1)">设置榜单</el-button>
      </el-button-group>
      <el-table :data="tabledata" style="width: 100%" @cell-click="cellclick" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column v-for="(item,index) in col" :key="index" :prop="index" :label="item"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :page-size="100" :current-page.sync="cpage" layout="prev, pager, next" :total="total" @current-change="opendata"></el-pagination>
    </div>`,
  methods: {
    opendata: function (pg) { //请求数据
      //console.log("opendata", this, this.path, this.datebe);
      let $this = this;
      $this.cpage = pg;
      if (this.tabledata.view) this.tabledata.view = "";
      http.get("/ajax/" + this.path + "?V=" + this.sval + "&B=" + (this.datebe[0] || "") + "&E=" + (this.datebe[1] || "") + "&P=" + pg).then(function (res) {
        if ("total" in res.data) {
          $this.total = res.data.total | 0;
          $this.tabledata = res.data.data;
        } else {
          $this.tabledata = res.data;
        }
      });
    },
    cellclick: function (row, col, cell) { //点击了单元格
      if (this.col["usrid"] == "UserID" && cell.cellIndex == 1) {
        console.log("UserID", cell.innerText);
        this.$emit('showmenu', 0, 1, cell.innerText);
      }
    },
    handleClick: function (val){ //查看指定用户
      this.$emit('showmenu', 0, 1, val.usrid);
    },
    handleSelectionChange: function(val){ //选择列变化
      this.selrows = val;
    },
    setbus: function(btp){ //设置商务用户
      let $this = this;
      if(this.selrows.length < 1){
        return this.$message("请选择用户");
      }
      http.get("/ajax/setbusiness?V=" + this.selrows[0].usrid + "&T=" + btp).then(function (res) {
        $this.$message({message: res.data.m, type: 'success'});
      });
    },
    setrank: function(btp){ //设置榜单用户
      let $this = this;
      if(this.selrows.length < 1){
        return this.$message("请选择用户");
      }
      http.get("/ajax/setrank?V=" + this.selrows[0].usrid + "&T=" + btp).then(function (res) {
        $this.$message({message: res.data.m, type: 'success'});
      });
    }
  },
  created: function () {
    console.log("created ", this.pval, " sval ", this.sval);
    if (this.pval) {
      this.sval = this.pval;
      this.opendata(1);
    }
  }
});